<template>
  <div class="x-axis-tools">
    <fold :title="'x轴'">
      <div class="content">
        <div>
          <span>显示：</span>
          <el-switch v-model="the_x_axis_show" @change="setXAxisShow"></el-switch>
        </div>
        <div>
          <span>名称：</span>
          <el-input size="mini" v-model="the_x_axis_name" @change="setXAxisName"></el-input>
        </div>
        <div>
          <span>显示位置：</span>
          <el-select size="mini" v-model="the_name_location" placeholder="请选择" @change="setNameLocation">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div>
            <span>偏移位：</span>
            <el-input-number size="mini" v-model="the_offset" @change="setOffset"></el-input-number>
        </div>
        <div>
            <span>位置：</span>
            <el-select size="mini" v-model="the_position" placeholder="请选择" @change="setPosition">
            <el-option
              v-for="item in positions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
            </el-select>
        </div>
        <div>
            <div style="display:flex;align-content:center;">
              <span>名称颜色：</span>
              <el-color-picker v-model="the_color" size="mini" @change="setColor"></el-color-picker>
            </div>
        </div>
        <div>
            <span>名称大小：</span>
            <el-slider v-model="the_fontsize" @change="setFontSize"></el-slider>
        </div>
      </div>
    </fold>
  </div>
</template>

<script>
import Fold from "@/components/common/Fold.vue";

export default {
  components: {
    Fold,
  },
  props: [
    "xAxisShow",
    "xAxisName",
    "nameLocation",
    "offset",
    "position",
    "color",
    "fontSize",
  ],
  created() {},
  data() {
    return {
      the_x_axis_show: this.xAxisShow,
      the_x_axis_name: this.xAxisName,
      the_name_location: this.nameLocation,
      the_offset: this.offset,
      the_position: this.position,
      the_color: this.color,
      the_fontsize: this.fontSize,

      options:[
          {
          value:"start",
          label:"起始"
        },
        {
            value:"middle",
            label:"居中"
        },
        {
            value:"end",
            label:"结束",
        }
      ],
      positions:[
          {
              value: "top",
              label: "顶部",
          },
          {
              value: "bottom",
              label: "底部"
          }
      ]
    };
  },
  methods: {
    setXAxisShow(val) {
      this.$store.commit("setChartActiveXAxisShow", val);
    },
    setXAxisName(val) {
      this.$store.commit("setChartActiveXAxisName", val);
    },
    setNameLocation(val){
        this.$store.commit("setChartActiveXAxisLocation", val);
    },
    setOffset(val){
        this.$store.commit("setChartActiveXAxisOffset", val)
    },
    setPosition(val){
        this.$store.commit("setChartActiveXAxisPosition", val)
    },
    setColor(val){
        this.$store.commit("setChartActiveXAxisColor", val)
    },
    setFontSize(val){
        this.$store.commit("setChartActiveXAxisFontSize", val)
    }
  },
};
</script>

<style scoped>
.x-axis-tools {
  margin-top: 5px;
}

.content > div{
  margin-bottom:10px;
}
</style>